import React, { useMemo, useRef, useState, useEffect } from 'react';
import { ErrView, filter_row, GridTable, NuiBt, uDb, IkInput, BaseDlg, obj_str, cline, useForm } from 'sui';
import { NumVer } from 'base/ctl/keyboard';

const DlgTech = ({ hcmd, data, open, setOpen }) => {
    const [select, setSelect] = useState();
    const [recent, setRecent] = useState();
    const [err, setErr] = useState();
    const [main, setMain] = useState();
    const [value, setValue] = useState();
    const form = useForm(setValue);
    const msn_ref = useRef(null);

    useEffect(() => {
        if (!open) {
            return;
        }

        uDb(null, "tech/list", { line: cline() }, r => setMain(r), e => setMain(null));

        setValue(null);
        setErr("");
        setSelect(null);

        if (data) {
            setRecent(data["recent"]);
        } else {
            setRecent(null);
        }

        msn_ref.current.focus();
    }, [open, data]);

    const getRow = useMemo(() => {
        const filter = obj_str(value, "filter");

        const lst = ["sn"];
        return filter_row(main, lst, filter);
    }, [main, value]);

    const hdone = () => {
        if (!select) {
            setErr("请选择型号");
            return;
        }

        const f = main.find(d => d.sn === select);
        if (!f) {
            setErr("型号数据错误");
            return;
        }

        setOpen(false);

        hcmd({
            sn: select,
            width: obj_str(f, "outwidth"),
            dia: obj_str(f, "outdia"),
        });
    };

    const lst = [
        {ref: msn_ref, k: "filter"},
    ];

    const col = [
        {name: "型号", key: 'sn', width: 290},
    ];

    const hclick = (v) => {
        if (!v) {
            return;
        }

        setSelect(v.sn);
    };

    const hrecent = (v) => {
        if (!v) {
            return;
        }

        setSelect(v.sn);
    };

    return (
        <BaseDlg open={open} title="设置型号" width="lg">
            <div className="flex flex-col">
                <div className="w-full flex flex-row">
                    <div className="w-1/4 mr-2 border-2 border-gray-500 ml-4 mt-3">
                        <div className="bg-gray-500 py-2 text-2xl text-white"><span className="ml-4">最近使用</span></div>
                        <GridTable high={490} col={col} row={recent} hclick={hrecent} hlight={v => v.sn === select} rowHeight={68} ft="1.875rem"/>
                    </div>
                    <div className="w-1/4 mr-2 mr-4">
                        <IkInput label="值" name="filter" form={form} value={value} width="w-full" href={msn_ref} className="flex justify-end"/>
                        <GridTable high={500} col={col} row={getRow} hclick={hclick} hlight={v => v.sn === select} rowHeight={68} ft="1.875rem"/>
                    </div>
                    <div className="w-2/4">
                        <NumVer className="mt-3" lst={lst} value={value} setValue={setValue}/>
                    </div>
                </div>
                <ErrView err={err}/>
                <div className="inline-flex justify-end">
                    <NuiBt className="h-16" hcmd={() => setOpen(false)}>取消</NuiBt>
                    <NuiBt className="ml-12 mr-4 h-16" hcmd={hdone}>确定</NuiBt>
                </div>
            </div>
        </BaseDlg>
    );
};

export {DlgTech};
